<template>
  <view class="range-fee">
    <view class="range-table-wrap">
      <table class="range-table">
        <tr>
          <td class="th-range">外送范围</td>
          <td class="th-fee">外送费用</td>
          <td class="th-option"></td>
        </tr>
        <tr v-for="(item, index) in config" :key="index" class="range-table-item">
          <td>
            <view class="td-wrap">
              <view class="input-wrap">
                <input v-model="item.min" type="number" @blur="handleChangeFloat(item,'min',index)" />
              </view>
              <view class="text-wrap">
                <text>至</text>
              </view>
              <view class="input-wrap">
                <input v-model="item.max" type="number" @blur="handleChangeFloat(item,'max',index)" />
              </view>
              <view class="text-wrap">
                <text>公里</text>
              </view>
            </view>
          </td>
          <td>
            <view class="td-wrap">
              <view class="input-wrap">
                <input v-model="item.price" type="number" @blur="handleChangeFloat(item,'price',index)" />
              </view>
              <view class="text-wrap">
                <text>元</text>
              </view>
            </view>
          </td>
          <td>
            <view class="td-wrap td-option">
              <uni-icons type="trash" size="15" @click="removeConfig(index)"></uni-icons>
            </view>
          </td>
        </tr>
      </table>
      <view class="add-btn-wrap">
        <text @click="addRangeConfig">添加范围+</text>
      </view>
    </view>
  </view>
</template>

<script>
import { mapState } from "vuex";
export default {
  data() {
    return {
      config: [
        {
          min: "",
          max: "",
          price: ""
        }
      ]
    };
  },
  computed: {
    ...mapState({
      deliveryData: state => state.delivery.data
    })
  },
  created() {
    this.init();
  },
  methods: {
    init() {
      let defaultConfig = {
        min: "",
        max: "",
        price: ""
      };
      this.config = (this.deliveryData.deliveryFeeConfig &&
        this.deliveryData.deliveryFeeConfig.config) || [defaultConfig];
    },
    addRangeConfig() {
      let defaultConfig = {
        min: "",
        max: "",
        price: ""
      };
      let len = this.config.length;
      if (len > 0 && this.config[len - 1].max)
        defaultConfig.min = this.config[len - 1].max;
      this.config.push(defaultConfig);
    },
    removeConfig(index) {
      this.config.splice(index, 1);
    },
    handleChangeFloat(data, key, index) {
      let len = this.config.length;
      if (data[key] || data[key] === 0) {
        let value = Number(data[key]);
        data[key] = parseFloat(value.toFixed(2));
      }
      // if (key == "max" && index < len - 1) {
      //   this.config[index + 1].min = data[key];
      // }

      // if (key == "min" && index > 0) {
      //   this.config[index - 1].max = data[key];
      // }
    },
    getData() {
      let valid = true;
      let title = "请将计费规则填写完整";
      if (this.config.length == 0) {
        valid = false;
        title = "请将计费规则填写完整";
        return false;
      }
      this.config.forEach((v, i) => {
        if (
          (this.$isNull(v.min) ||
            this.$isNull(!v.max) ||
            this.$isNull(!v.price)) &&
          valid
        ) {
          valid = false;
          title = "请将计费规则填写完整";
        }
        if (i > 0 && valid) {
          if (this.config[i - 1].max != this.config[i].min) {
            title = "范围最小值应该等于前一范围的最大值";
            valid = false;
          }
        }
        if (v.min >= v.max && valid) {
          title = "范围最大值必须大于范围最小值";
          valid = false;
        }
      });
      if (!valid) {
        uni.showModal({
          content: title,
          showCancel: false
        });
        // uni.showToast({
        //   title: title,
        //   icon: "none",
        //   duration: 3000
        // });
      }
      return valid ? this.config : false;
    }
  }
};
</script>

<style scoped lang="scss">
.range-fee {
  .range-table-wrap {
    .range-table {
      width: 100%;
      .range-table-heade {
        th {
          font-weight: 500;
          color: $uni-text-color-grey;
          text-align: left;
        }
      }
      .th-range {
        width: 60%;
      }
      .th-fee {
        width: 30%;
      }
      .th-option {
        width: 10%;
      }
      .range-table-item {
        padding: 10rpx 0;
      }
      .td-wrap {
        display: flex;
        flex-wrap: nowrap;
        justify-content: space-between;
        align-items: center;
        padding-top: 10rpx;
      }
      .td-option {
        justify-content: flex-end;
      }
      .input-wrap {
        width: 100rpx;
        border: 1px solid #eeeeee;
        padding: 10rpx 20rpx;
      }
    }
  }
  .add-btn-wrap {
    margin-top: 30rpx;
    text-align: center;
    color: $themeColor;
  }
}
</style>
